<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>Dom的使用-input</title>
</head>
<style>
    body {
        width: 100%;
        height: 100vh;
        background-color: wheat;
        font-size: 30px;
        text-decoration: none;
        font-family: "华文楷体";
    }

    p {
        font-size: 40px;
        margin: 20px 0 0 0;
        font-weight: bold;
    }

    span {
        /*display: block;*/
        line-height: 50px;
    }

    header {
        /*text-align: center;*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #outer {
        width: 200px;
        height: 200px;
        background-color: #b3b1af;
        /*margin: 0 auto;*/
    }

    button {
        margin-top: 20px;
        font-size: 25px;
        width: 80px;
        height: 35px;
        background-color: #b3b1af;
        border: none;
        border-radius: 10%;
        box-shadow: black 0 0 5px;
        transition: linear 0.2s;
        z-index: 1;
    }

    button:hover {
        background-color: pink;
        transform: scale(1.1);
        color: deeppink;
    }

    @keyframes move {
        from {
            top: 0px;
        }
        to {
            top: 200px;
        }
    }
</style>
<body>
<header>
    <div id="outer"></div>
    <button id="change">修改</button>
    <button id="move">移动</button>
    <button id="mouse_on">变换</button>
    <button id="clear">刷新</button>
</header>

</body>
<script>
    let box = document.getElementById("outer")

    function all_button(btn, fun) {
        let button = document.getElementById(btn)
        button.onclick = fun
    }

    //修改按钮
    all_button("change", function () {
        box.style.width = "400px"
        box.style.height = "400px"
        box.style.backgroundColor = "skyblue"
        box.style.boxShadow = "0 0 10px grey"
    })
    // 移动按钮-animation
    all_button("move", function () {
        box.style.position = "relative"
        box.style.animation = "move 4s 2 linear"
        // 将box开始的状态设置为移动
        box.style.animationPlayState = "true";


        if (!document.getElementById("stop")) {
            let stop = document.createElement("button")
            let header = document.getElementsByTagName("header")
            stop.id = "stop"
            stop.innerHTML = "暂停"
            stop.style.backgroundColor = "white"
            // 获取移动按钮
            let move=document.getElementById("mouse_on")
            header[0].insertBefore(stop,move)
            // 调用函数
            // 暂停按钮
            all_button("stop", function () {
                // 将box开始的状态设置为停止
                box.style.animationPlayState = "paused";
            })
        }
    })
    // 变换按钮-transition&&transform
    all_button("mouse_on",function (){
        box.style.transform="scale(1.5) rotate(100deg)"
        // box.style.transform=""
        box.style.transition="all linear 1.5s"
    })
    //清除按钮-刷新页面
    all_button("clear",function (){
        location.reload();
        // window.location.reload();
    })
</script>
</html>